//@ts-nocheck
import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts'
import { ColorGamut } from '../colorConfig'

import './index.less'

interface IProps {
  data?: Array<{ value: number; title: string }>
}
const RosePieChart: React.FC<IProps> = ({ data }) => {
  const chartWrapRef = useRef<any>(null)
  const finalData = data.map((item, index) => {
    return {
      value: item.value,
      label: item.title,
      itemStyle: {
        color: ColorGamut[index + 1]
      }
    }
  })

  useEffect(() => {
    let chart = echarts.init(chartWrapRef.current)
    const category = finalData.map((item) => item.label)
    const max = Math.max(...finalData.map((item) => item.value))
    // 玫瑰图
    let options = {
      visualMap: {
        type: 'piecewise',
        min: 0,
        max: 20,
        showLabel: true,
        pieces: finalData?.map((item, index) => {
          if (index === 0) {
            return {
              gte: 0,
              lte: 0.5,
              label: item.label,
              color: item.itemStyle.color
            }
          } else if (index === 1) {
            return {
              gt: 0.5,
              label: item.label,
              lte: 1,
              color: item.itemStyle.color
            }
          }else {
            return {
              gt: index*0.9,
              label: item.label,
              lte: 0.9*(index + 1),
              color: item.itemStyle.color
            }
          }
        }),
        show: true
      },
      grid: [
        {
          top: '2%',
          height: '98%',
          width:'100%',
        },
      ],
      color: ColorGamut,
      polar: {
        radius: [30, '80%']
      },
      textStyle: {
        color: ' #8B98A9',
        fontWeight: 400
      },
      radiusAxis: {
        max: max,
        polarIndex: 0,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#ECEEF1',
            width: 1
          }
        },
        axisLabel: {
          show: true
        },
        z: 10
      },
      angleAxis: {
        type: 'category',
        data: category,
        startAngle: 0,
        // min: 0,
        // max: 360,
        // interval: 60,
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#efefef'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ECEEF1',
            width: 1,
            type: 'solid'
          }
        },
        z: 10
      },
      tooltip: {},
      series: {
        type: 'bar',
        colorBy: 'data',
        data: finalData,
        coordinateSystem: 'polar',
        label: {
          show: false,
          position: 'middle',
          formatter: '{b}: {c}'
        },
        barCategoryGap: 0,
        z: 10
      },
      animation: false
    }
    chart.setOption(options)
  }, [data])

  return (
    <div className="rose-chart-wrap">
      <div className="rose-chart-content" ref={chartWrapRef} />
    </div>
  )
}

export default RosePieChart
